define(function(){
   function Tab(obj){
    Object.assign(this,obj)
    this.init()
   }
   Tab.prototype={
       constructor:Tab,

       init:function(){
           this.index=0
        this.move();
        this.addEnt();
       },
    //    渲染
       move:function(){
        var that=this;
        this.uls.innerHTML=this.data.map((v,i)=>{
            return `<li class='${this.index==i?'on':''}'>${v.title}</li>`
        }).join('');

        this.cont.innerHTML=this.data[this.index].children.map((v,i)=>{
            return `
                <dl>
                    <dt><img src='${v.img}'></dt>
                    <dd>
                        <p>${v.name}</p>
                        <h2>${v.price}</h2>
                    </dd>
                </dl>
            `
        }).join('')
       },

       addEnt:function(){
           var that=this;
           this.uls.addEventListener('click',(e)=>{
            var el=e.target;
           if(el.nodeName=='LI'){
            this.index=[...that.uls.children].indexOf(el);
            this.move();
           }
        })
       }
   }
   return Tab
})